import React from 'react';
import { Menu, Icon } from 'antd';

const {Item, SubMenu} = Menu;
class CanvasPopupMenu extends React.Component {
    dom = React.createRef();
    refs = {
        dom: null
    };
    constructor(props) {
        super(props);
    }

    componentDidMount = () => {
        this.props.onUpdate(this.refs.dom);
    }

    componentDidUpdate =() => {
        this.props.onUpdate(this.refs.dom);
    }

    render() {
        return (
            <div
                className="canvasPopupMenu"
                ref={dom => {this.refs.dom = dom;}}
                style={{ width: 180, left: this.props.pointer[0], top: this.props.pointer[1] }}
            >
            <Menu
                // defaultSelectedKeys={['1']}
                // defaultOpenKeys={['sub1']}
                mode="vertical"
                theme="dark"
                
            >
                <Item key="1">
                    <Icon type="mail" />
                    Navigation One
                </Item>
                <Item key="2">
                    <Icon type="calendar" />
                    Navigation Two
                </Item>
                <SubMenu key="sub1" title={<span><Icon type="appstore" /><span>Navigation Three</span></span>}>
                    <Item key="3">Option 3</Item>
                    <Item key="4">Option 4</Item>
                    <SubMenu key="sub1-2" title="Submenu">
                    <Item key="5">Option 5</Item>
                    <Item key="6">Option 6</Item>
                    </SubMenu>
                </SubMenu>
                <SubMenu key="sub2" title={<span><Icon type="setting" /><span>Navigation Four</span></span>}>
                    <Item key="7">Option 7</Item>
                    <Item key="8">Option 8</Item>
                    <Item key="9">Option 9</Item>
                    <Item key="10">Option 10</Item>
                </SubMenu>
            </Menu>
            </div>
        );
    }
}

export { CanvasPopupMenu };